<template>
  <div class="resize-box">
    <slot></slot>
  </div>
</template>

<script>

/**
  * 可拉伸盒子
  * @author 阳坤（1194636148@qq.com）
  * @date   时间：2022/7
  */

// import { getComponentChildren } from '@/utils'
export default {
  name: 'ResizeBox',
  components: {},
  props: {},
  data () {
    return {
      observer: null, // 盒子变化回调函数
      domRisizeTimer: null // 防抖延时器
    }
  },
  mounted () {
    this.onResize()
  },
  methods: {
    /**
     *  监听盒子宽高变化
     *
     * */
    onResize () {
      this.observer = new ResizeObserver(() => {
        if (this.domRisizeTimer) {
          clearTimeout(this.domRisizeTimer)
          this.domRisizeTimer = null
        }
        this.domRisizeTimer = setTimeout(() => {

          // 重新渲染echarts
          // getComponentChildren(this, 'resize', null)
        }, 500)
      })
      // 监听元素
      this.observer.observe(this.$el)
    }
  },
  beforeUnmount () {
    // 销毁监听
    this.observer.unobserve(this.$el)
    if (this.domRisizeTimer) {
      clearTimeout(this.domRisizeTimer)
      this.domRisizeTimer = null
    }
  }
}
</script>

<style scoped lang="less">
.resize-box {
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: both;
  overflow: hidden;
  padding: 10px;
  display: flex;

}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.resize-box::-webkit-scrollbar {
  width: 1.5vh;
  /*滚动条宽度*/
  height: 1.5vh;
  /*滚动条高度*/
}
</style>
